<template>
  <div class="detailContainer">
    <Header></Header>
    <!-- 轮播 -->
    <van-swipe class="content">
      <div v-for="item in skuDefaultImg" :key="item.id">
        <van-swipe-item class="detailItem">
          <img class="detailImg" :src="item.imgUrl" alt="" />
        </van-swipe-item>
      </div>

      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>

    <div class="m-detailBaseInfo">
      <!-- 隔离 -->
      <div class="priceInfo"></div>
      <div class="spmcBanner" style="background-color: #fff1d2">
        <div class="spmcPrice">
          <img
            src="//yanxuan.nosdn.127.net/08252a1e8acffc6e34e57e552bd1f5f2.png"
            alt=""
            style="width: 12px; height: 12px"
          />
          <span class="spmcDesc" style="font-size: 19px">
            Pro会员叠加优惠，再省
            <span class="spmcEconomizePrice" style="font-size: 19px">
              ¥2.6
            </span>
          </span>
          <!-- 开通 -->
          <span class="spmcBtn">开通</span>
        </div>
      </div>
      <!-- baseInfo -->
      <div class="baseInfo">
        <div class="info">
          <div class="name">{{ skuName }}</div>
          <div class="simpleBrandInfo">
            <div class="preLogo"></div>
            <img src="" alt="" />
            <span class="title" style="font-size: 12px; line-height: 28px"
              >网易严选</span
            >
          </div>
          <div style="font-size: 12px">推选理由</div>
        </div>
        <div class="comment single-line">
          <div class="wrap">
            <div class="info-wrap">
              <div class="num">99.6%</div>
              <div class="com">好评率</div>
            </div>
            <i class="u-icon u-address-right">></i>
            <!-- 111 -->
          </div>
        </div>
      </div>
      <div class="rcmdBanner">
        <ul class="cmdBannerList">
          <li
            class="cmdBanneritem"
            v-for="(item, index) in skuAttrValueList"
            :key="item.attrId"
          >
            <div class="key">{{ index + 1 }}</div>
            <div class="recommendReason">{{ item.valueName }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="box">
      <!-- 选择数量 -->
      <div class="tm-list">
        <van-cell
          class="tm-item"
          is-link
          title="邮费：单项包邮"
          @click="show = true"
        />
        <van-action-sheet class="tmItm" v-model:show="show" description="邮费">
          <div class="content">
            <div style="font-size: 20px; margin-bottom: 10px">
              免邮，合作仓直发
            </div>
            <van-text-ellipsis
              :content="text"
              rows="4"
              style="font-size: 15px; width: 350px; font-weight: 100"
            />
          </div>
        </van-action-sheet>
      </div>
      <!-- 积分 -->
      <div class="tm-list">
        <van-cell
          class="tm-item"
          is-link
          title="购物返: 最高返6积分"
          @click="show = true"
        />
        <van-action-sheet
          class="tmItm"
          v-model:show="show"
          description="什么是购物返"
        >
          <div class="content">
            <div style="font-size: 20px; margin-bottom: 10px">
              免邮，合作仓直发
            </div>
            <van-text-ellipsis
              :content="text1"
              rows="7"
              style="font-size: 15px; width: 350px; font-weight: 100"
            />
          </div>
        </van-action-sheet>
      </div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="onClickIcon"
      />
      <van-action-bar-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      />
    </van-action-bar>
    <!-- 点击弹出 -->
    <div v-if="isShow">
      <van-cell is-link @click="onClickIcon" />
      <van-popup v-model:show="isShow" :style="{}" position="bottom">
        <div>
          <van-card
            class="buycard"
            :num="phoneNum"
            :price="price"
            desc="¥价格"
            title="商品标题"
            :thumb="imgUrl"
          >
            <template #tags>
              <van-tag plain type="primary">手机太好了</van-tag>
              <van-tag plain type="primary">抓紧买</van-tag>
            </template>
            <template #footer>
              <van-button size="mini" @click="add">+</van-button>
              <van-button size="mini" @click="sub">-</van-button>
            </template>
          </van-card>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { reqAddToCart, reqPhoneList } from "../../api/category";
import { useRouter } from "vue-router";
// 组件倒入

// 选项框状态
const show = ref(false);

const router = useRouter()

// 邮费文本
const text =
  "本商品由严选合作仓发货，大陆地区免邮费;港澳台地区满500元免邮费，不满500元收取30元邮费;海外地区以下单页提示运费为准";

// 购物返
const text1 = `1.回馈金是严选用以回馈用户的代币
2.回馈金可与现金1:1抵扣使用
3.回馈金使用无门槛，可叠加
4.购物即可返还回馈金，用户等级越高，返还比例越高
5.本月获取的回馈金，统一在次月25日23:59:59失效请尽快使用
6.可在个人中心--回馈金中查看回馈金资产
7.部分特殊商品和订单不支持返还回馈金，具体以回馈金的活动说明为准
8.如有疑问，请联系严选在线客服`;

// 点击弹出
const isShow = ref(false);

// 轮播图数据
const skuDefaultImg = ref<any>([]);
// 手机详细信息
const skuAttrValueList = ref<any>([]);
// 手机描述
const skuName = ref<string>("");
// 购物车单张照片
const imgUrl = ref<string>("");
// 商品价格
const price = ref<number>(1);
// 手机商品数量
const phoneNum = ref<number>(1);
// 手机id
const valueId = ref<any>(1);

// 随机数
let array = [
  1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 13, 15, 16, 18, 19, 20, 31, 32, 30, 28, 27,
  24, 22,
];
function getRandomValueFromArray(array: any[]) {
  const randomIndex = Math.floor(Math.random() * array.length);
  return array[randomIndex];
}
// 发送手机详情页面
const getreqPhoneList = async () => {
  const randomValue = getRandomValueFromArray(array);
  // 保存id
  valueId.value = randomValue;

  let res = await reqPhoneList(valueId.value);
  // console.log(res);
  
  // let arr = [];
  // arr = res.data.skuInfo.skuImageList.slice().reverse();
  // 轮播动态数据
  skuDefaultImg.value =  res.data.skuInfo.skuImageList.slice().reverse();
  // 手机详细信息
  // let arr1 = [];
  // arr1 = res.data.skuInfo.skuAttrValueList;
  skuAttrValueList.value = res.data.skuInfo.skuAttrValueList.slice(0, 4);
  // 手机介绍
  skuName.value = res.data.skuInfo.skuName;
  // 购物车单张照片
  imgUrl.value = skuDefaultImg.value[0].imgUrl;
  // 价格
  price.value = res.data.skuInfo.price;

  // price.value=
};
// 点击修改商铺数量+
let add = () => {
  phoneNum.value += 1;
  getAddToCart();
}
let sub = () => {
  let { value } = phoneNum;
  if (value >= 2) {
    phoneNum.value -= 1;
    getAddToCart();
  }
};
// 点击购买
const onClickButton = () => {
  // getAddToCart();
  router.replace('/shopcart')
};
// 加入购物车
const onClickIcon = () => {
  isShow.value = true;
};
// 确定购买
// let buy=()=>{

//   alert('加入成功 购物车查看')

// }
// 加入购物车函数
const getAddToCart = async () => {
  await reqAddToCart(valueId.value, phoneNum.value);
  // console.log(res);
  
};
// const gteAcartList = async () => {
//   let res = await reqAcartList();
// };
// 发请求
onMounted(() => {
  // 获取推选好物
  getreqPhoneList();
});
</script>

<script lang="ts">
export default {
  name: "detail",
};
</script>

<style lang="scss" scoped>
.detailContainer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .content {
    width: 100%;
    height: 100%;

    .detailItem {
      width: 375px;
      height: 375px;

      .detailImg {
        width: 100%;
        height: 100%;
      }
    }
  }

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }

  // 广告
  .col1 {
    width: 100%;
    height: 73px;
    background-color: red;
    border: 1px solid red;
    display: flex;
    justify-content: space-between;

    .head {
      width: 258px;
      height: 18px;
      margin-left: 10px;

      margin-top: 10px;
      display: flex;
      flex-direction: row;

      .headText {
        color: white;
        font-size: 12px;
        line-height: 16px;
      }
    }

    //   价格
    .priceArea {
      width: 285px;
      height: 44.5px;

      .currentPrice {
        color: white;
        font-size: 18px;
      }
    }

    .logo-Url {
      width: 75px;
      height: 40px;
      margin-top: 10px;
    }
  }

  // m-detailBaseInfo
  .m-detailBaseInfo {
    width: 100%;
    height: 235px;
    margin-top: 13px;
    padding: 0px 15px 0 15px;

    .spmcBanner {
      display: flex;
      justify-content: space-between;

      .spmcBtn {
        display: inline-block;
        margin-left: 45px;
        border-radius: 10px;
        background-color: black;
        color: #fff1d2;
        font-size: 18px;
      }
    }
  }

  // baseInfo
  .baseInfo {
    display: flex;
    height: 75.5px;
    width: 100%;
    margin-top: 10px;

    .info {
      width: 271px;
      height: 75.5px;

      .name {
        font-size: 16px;
        width: 259px;
        white-space: nowrap;
        /* 禁止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 使用省略号表示被隐藏的部分 */
      }

      .simpleBrandInfo {
        width: 295px;
        height: 28px;
        display: flex;

        .preLogo {
          border: 1px sould;
          background-image: url("../../assets/wangyi.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 80% 60%;
          width: 50px;
          height: 20px;
          line-height: 10px;
          padding-top: 10px;
        }
      }
    }

    .comment {
      width: 89px;
      height: 75.5px;

      .wrap {
        width: 83.14px;
        height: 40.5px;
        display: flex;
        position: relative;

        .num {
          width: 49.14px;
          height: 22.5px;
          font-size: 24px;
          color: red;
        }

        .com {
          width: 49.14px;
          height: 18px;
          font-size: 12px;
          color: #7f7f7f;
        }

        .u-icon {
          position: absolute;
          top: 12px;
          left: 70px;
          font-size: 20px;
          color: #7f7f7f;
        }
      }
    }
  }

  //   rcmdBanner
  .rcmdBanner {
    width: 345px;
    height: 94px;
    background-color: #e6e6e6;

    .cmdBannerList {
      margin-left: 10px;

      .cmdBanneritem {
        display: flex;
        padding-top: 3px;
        margin-bottom: 5px;

        .key {
          width: 12px;
          height: 12px;
          border: 1px solid red;
          text-align: center;
          border-radius: 50%;
          font-size: 12px;
          color: red;
        }

        .recommendReason {
          font-size: 12px;
          padding-left: 5px;
        }
      }
    }
  }

  .box {
    width: 100%;
    height: 180px;
    margin-top: -10px;

    .tm-list {
      width: 373px;
      height: 52px;

      .tm-item {
        width: 370px;
        height: 52px;
      }

      .tmItm {
        width: 100%;
        height: 375px;

        .content {
          width: 100%;
          height: 375px;
        }
      }
    }
  }
  // 购买
  .buycard {
    height: 400px;
  }
}
</style>
